查看原文
其他

美团技术团队-前端系列文章

以客户为中心的 美团技术团队 2022-05-14


各位伙伴好,欢迎关注「美团技术团队」微信公众号。在这里,已经有32万小伙伴与大家一起学习成长。本文系前端系列文章汇总,我们也会不断更新这里的内容,点击下面的各个标题就可以查看原文了,Enjoy!

美团外卖终端容器无关化研发框架

2019年9月,美团外卖技术团队联合多个研发部门正式推出了React2X,面向所有的前端研发人员,特别是按业务领域划分的团队,为大家提供一个完整的、开放的多终端容器无关化(Containerless)研发框架。研发同学可以通过React2X框架快速创建、开发、构建、部署项目,在人力消耗最小的前提下,以期在不同终端上达到相对最佳的性能体验,并且能大幅降低因容器升级带来的替换和改造成本,让代码同构的复用率最大化。


美团跨端一体化富文本管理技术实践

为了减少产品和前端开发人员之间的矛盾,不断降本提效,美团医药技术部构建了跨端一体化富文本管理平台Page-佩奇。本文系统介绍了该平台的定位、设计思路、实现原理以及取得的成效。希望这些实战经验与总结,能给大家带来一些启发或帮助。

美团民宿跨端复用框架设计与实践

从 PC 时代、移动时代到万物互联的 IoT 时代,伴随终端设备的日趋多样化,跨端复用的种子自此落地,开始生根发芽。从业务角度出发,跨端技术演进更多是在不同阶段、不同时间段内业务效率上的选择,美团民宿业务在大前端融合的浪潮中逐浪前行,不断探索和迭代抉择,为解决业务痛点而孵化出跨端框架技术,在这个过程中,我们进行了很多的探索和实践的思考,希望能给大家一些启发。本文主要分享美团民宿在跨端复用技术探索和业务实践过程中的经验。

Flutter Web在美团外卖的实践

在多形态业务场景下,如何保障多端体验的一致性,是前端技术领域一个比较受关注的方向。美团外卖前端技术团队基于 Flutter Web 探索跨端(App\PC\H5)的解决方案,真正实现“Write Once & Run AnyWhere”。本文系该团队的实践经验总结,希望能对大家有所帮助或者启发。

外卖客户端容器化架构的演进

好的架构要不断演变,进而去适应业务的发展。美团在移动端上的架构,也经历了组件化、平台化、RN混合化,到现在开始向容器化变迁。容器化架构充分地利用了现在的跨端技术,将动态化的能力最大化地赋予了业务。

作为美团最为重要的业务之一,美团外卖移动端的架构演进是怎样的呢?本文将为你揭开背后的思考、技术细节以及实践。

积木 Sketch Plugin:设计同学的贴心搭档

多年来,美团外卖一直在高速增长,但整个客户端的UI组件一直没有得到很好的统一。而在开发过程中因UI缺乏同一的标准导致各种问题凸显,积木插件Sketch Plugin应运而生。外卖技术团队将其打造成为UI一致性的抓手,最终帮助团队减少开发成本,提升了交付的质量,并为美团多个业务团队提供了很好的支持服务。

本文主要介绍了Sketch Plugin项目的背景,并由浅入深地带领大家认识了Sketch Plugin项目,文中还详细解读了该技术的各种优缺点,同时还提供了详细的实践步骤和踩坑总结。希望本文对大家打造一致性体验能够有所帮助。

积木Sketch插件进阶开发指南

为了帮助更多的设计师小哥哥、小姐姐落地设计规范,提升产研效率,积木Sketch团队开始着手打造一个平台化的产品。本文介绍了积木Sketch插件进阶开发指南。希望通过本篇内容的学习,大家可以知道如何真正实现一款可以与业务强关联且功能可定制的成熟工具。

移动端UI一致性解决方案

外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低整体视觉改版带来的研发成本。外卖技术团队通过在实践中不断总结经验,开发了一套完整的UI一致性解决方案,目前已经取得了一些成果,本文系实践经验分享。

美团外卖Flutter动态化实践

动态化是Flutter无法避开的话题。本文从Flutter的特点讲起, 阐述了美团外卖团队在整个Flutter动态化上探索的心路历程,还有设计理念、核心原理以及业务应用的经验。本文的视角也不局限于框架本身,更多思考了在解决问题的过程中技术团队需要做的事情,希望能对大家有所启发和帮助。

美团开源Logan Web:前端日志在Web端的实现

Logan是美团推出的大前端日志系统,支持多端环境运行,可为客户端、Web、小程序等用户端环境提供前端日志的存储、收集、上报及分析能力,能够帮助开发人员快速定位并解决端上问题,便于及时响应用户反馈与排除异常。本文将围绕Logan在Web端的应用背景、技术实现以及美团的实践、开源整体进展以及未来规划这几个方面展开介绍,以方便读者对Logan 大前端日志系统有更加深入的了解。

Flutter包大小治理上的探索与实践

Flutter作为一种全新的响应式、跨平台、高性能的移动开发框架,在性能、稳定性和多端体验一致上都有着较好的表现,自开源以来,已经受到越来越多开发者的喜爱。

但是,Flutter的引入往往带来包体积的增大,给很多研发团队带来了很大的困扰。美团外卖前端团队对Flutter的包大小问题进行了调研和实践,设计并实现了一套基于动态下发的包大小优化方案,希望对从事Flutter开发相关的同学能够带来一些启发或者帮助。

美团外卖持续交付的前世今生

美团外卖自2013年创建以来,业务一直在高速发展,从早期单一的美食业务发展成为包含闪购、跑腿、闪付、营销、广告等在内的平台业务。每个业务团队虽然都有不同的业务形态,但是几乎都有相同的诉求:需求能不能尽快的上线?本文将从外卖的历史实践中,浅谈一个好的持续交付需要综合考虑哪些关键因素,希望对大家有所帮助或启发。

Native 地图与 Web 融合技术的应用与实践

有用户反馈美团打车地图的性能有一些问题,美团打车技术团队在调研分析之后,采用了一套Native地图与Web的融合框架,不仅实现了用户手势事件智能分发的机制,还解决了WebView与Native地图在同一页面内布局困难的问题,同时性能也得到全面的优化。本文系融合技术的经验总结与分享。

iOS系统中导航栏的转场解决方案与最佳实践

目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美。有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们提出了一套解决方案并开发了相应的转场库,目前该转场库已经成为美团多个 App 的基础组件之一。

在美团 App 开发的早期,涉及到导航栏样式改变的需求时,经常会遇到转场效果不佳或者与预期样式不符的“小问题”。在业务体量较小的情况下,为了满足快速的业务迭代,通常会使用硬编码的方式来解决这一类“小问题”。但随着美团 App 业务的高速发展,这种硬编码的方式便遇到了挑战。

Logan:美团开源移动端基础日志库

Logan是美团移动端基础日志组件,这个名称是Log和An的组合,代表个体日志服务。同时Logan也是“金刚狼”大叔的名号,当然我们更希望这个产品能像金刚狼大叔一样犀利。

Logan已经稳定迭代了一年多的时间。目前,美团绝大多数App已经接入并使用Logan进行日志收集、上传、分析。近日,我们决定开源Logan生态体系中的存储SDK部分(Android/iOS),希望能够帮助更多开发者合理的解决移动端日志存储收集的相关痛点,也欢迎更多社区的开发者和我们一起共建Logan生态。Github的项目地址参见:https://github.com/Meituan-Dianping/Logan

美团外卖Android平台化的复用实践

美团外卖App和美团App外卖频道业务基本一样,但由于历史原因,两端代码差异较大,造成同样的子业务需求在一端上线后,另一端几乎需要重新实现,严重浪费开发资源。

在《美团外卖Android平台化架构演进实践》一文中,我们将美团外卖Android客户端平台化架构分为平台层、业务层和宿主层,我们希望能够在平台化架构中实现平台层和业务层的多端复用,从而节省子业务需求开发资源,实现多端部署。

beeshell——开源的React Native组件库

beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript组件和复合组件(包含 Native 代码),涉及前端(FE)、iOS、Android 三端技术,兼顾通用性和定制化,支持自定义主题,用于开发和服务企业级移动应用。现在已经在 GitHub 上开源,地址:https://github.com/meituan/beeshell

截止目前,beeshell 中的组件已经在美团外卖移动端应用蜜蜂 App 中广泛应用,而且已经持续了一年多时间,通过了各种业务场景、操作系统、机型的实战考验,具备很好的稳定性、安全性和易用性,所以我们将其开源,以期发挥出更大的应用价值。

前端安全系列之一:如何防止XSS攻击?

随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点。在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然,浏览器自身也在不断在进化和发展,不断引入 CSP、Same-Site Cookies 等新技术来增强安全性,但是仍存在很多潜在的威胁,这需要前端技术人员不断进行“查漏补缺”。

近几年,美团业务高速发展,前端随之面临很多安全挑战,因此积累了大量的实践经验。我们梳理了常见的前端安全问题以及对应的解决方案,将会做成一个系列,希望可以帮助前端人员在日常开发中不断预防和修复安全漏洞。

前端安全系列之二:如何防止CSRF攻击?

近几年,美团业务高速发展,前端随之面临很多安全挑战,因此积累了大量的实践经验。我们梳理了常见的前端安全问题以及对应的解决方案,将会做成一个系列,希望可以帮助前端同学在日常开发中不断预防和修复安全漏洞。本文是该系列的第二篇。

今天我们讲解一下 CSRF,其实相比XSS,CSRF的名气似乎并不是那么大,很多人都认为“CSRF不具备那么大的破坏性”。真的是这样吗?

美团扫码付小程序的优化实践

短短几年的时间,微信小程序已经从一颗小小的萌芽成长为参天大树,形成了较大规模的开发者生态系统,尤其是在支付、线下垂直领域潜力巨大。

作为领先的生活服务平台,美团的技术团队在小程序领域也进行了很多的探索和实践。本文介绍了美团扫码付小程序的实践,从内部环节和外部环节两个维度,分别阐述了美团前端技术团队所进行的一些探索。

ARKit:增强现实技术在美团到餐业务的实践

增强现实(Augmented Reality)是一种在视觉上呈现虚拟物体与现实场景结合的技术。Apple 公司在 2017 年 6 月正式推出了 ARKit,iOS 开发者可以在这个平台上使用简单便捷的 API 来开发 AR 应用程序。

本文将结合美团到餐业务场景,介绍一种基于位置服务(LBS)的 AR 应用。使用 AR 的方式展现商家相对用户的位置,这会给用户带来身临其境的沉浸式体验。

用微前端的方式搭建类单页应用

美团已经是一家拥有几万人规模的大型互联网公司,提升整体效率至关重要,这需要很多内部和外部的管理系统来支撑。由于这些系统之间存在大量的连通和交互诉求,因此我们希望能够按照用户和使用场景将这些系统汇总成一个或者几个综合的系统。

本文将为大家介绍“微前端构建类单页应用”在美团HR系统中的一些实践。同时也分享一些我们的思考和经验,希望能够对大家有所启发。

深入理解JSCore

动态化作为移动客户端技术的一个重要分支,一直是业界积极探索的方向。目前业界流行的动态化方案,如Facebook的React Native,阿里巴巴的Weex都采用了前端系的DSL方案,而它们在iOS系统上能够顺利的运行,都离不开一个背后的功臣:JavaScriptCore,它建立起了Objective-C和JavaScript两门语言之间沟通的桥梁。

无论是这些流行的动态化方案,还是WebView Hybrid方案,亦或是之前广泛流行的JSPatch,JSCore都在其中发挥了举足轻重的作用。作为一名iOS开发工程师,了解JSCore已经逐渐成为了必备技能之一。

WMRouter:美团外卖Android开源路由框架

WMRouter是一款Android路由框架,基于组件化的设计思路,功能灵活,使用也比较简单。

WMRouter最初用于解决美团外卖C端App在业务演进过程中的实际问题,之后逐步推广到了美团其他App,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去。Github项目地址与使用文档详见:https://github.com/meituan/WMRouter

美团扫码付的前端可用性保障实践

在扫码付业务火箭式发展的过程中,对整个系统的可用性提出了严格要求,前端服务也面临很大的挑战。我们在不断解决问题的过程中总结了一些经验,有些方案取得了不错的结果。

本文分享一下我们团队的思考,希望能帮助更多的同学对前端可用性的保障工作,有一个更全面的认识,后续还会分享很多美团前端相关的内容。

Flutter原理与实践

Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来,目前Flutter已经发布了近60个版本,并且在2018年5月发布了第一个“Ready for Production Apps”的Beta 3版本,6月20日发布了第一个“Release Preview”版本。

本文将详细全新移动UI框架Flutter的架构、特色功能(Hot Reload、插件等)和Dart语言,并分享美团外卖Flutter版全品类页面的实现细节。

Jenkins的Pipeline脚本在美团餐饮SaaS中的实践

Jenkins构建也有很多种方式,现在使用比较多的是自由风格的软件项目(Jenkins构建的一种方式,会结合SCM和构建系统来构建你的项目,甚至可以构建软件以外的系统)的方式。

本文将介绍美团餐饮SaaS在使用Jenkins持续集成过程中,多个Android项目构建和集成React Native时,使用Pipeline的经验。

Android消息总线的演进之路:用LiveDataBus替代RxBus、EventBus

对于Android App开发者来说,RxBus、EventBus是最为常用的消息总线框架,用于在不同模块之间订阅/发送消息,本文提供了一个新的框架——LiveDataBus。LiveData是Android Architecture Components提出的框架。LiveData是一个可以被观察的数据持有类,它可以感知并遵循Activity、Fragment或Service等组件的生命周期。

本文提供了一个新的消息总线框架——LiveDataBus。订阅者可以订阅某个消息通道的消息,发布者可以把消息发布到消息通道上。利用LiveDataBus,不仅可以实现消息总线功能,而且对于订阅者,他们不需要关心何时取消订阅,极大减少了因为忘记取消订阅造成的内存泄漏风险。

MCI:移动持续集成在大众点评的实践

随着业务的蓬勃发展,大众点评移动研发团队从当初各自为战的“小作坊”已经发展成为可以协同作战的、拥有千人规模的“正规军”。我们的移动项目架构为了适应业务发展也发生了天翻地覆的变化,这对移动持续集成提出更高的要求,而整个移动研发团队也迎来了新的机遇和挑战。

当前移动客户端的组件库超过600个,多个移动项目的代码量达到百万行级别,每天有几百次的发版集成需求。保证近千名移动研发人员顺利进行开发和集成,这是我们部门的重要使命。但是,前进的道路从来都不是平坦的,在通向目标的大道上,我们还面临着很多问题与挑战。

Android自动化页面测速在美团的实践

随着移动互联网的快速发展,移动应用越来越注重用户体验。美团技术团队在开发过程中也非常注重提升移动应用的整体质量,其中很重要的一项内容就是页面的加载速度。如果发生冷启动时间过长、页面渲染时间过长、网络请求过慢等现象,就会直接影响到用户的体验,所以,如何监控整个项目的加载速度就成为我们部门面临的重要挑战。

对于测速这个问题,很多同学首先会想到在页面中的不同节点加入计算时间的代码,以此算出某段时间长度。然而,随着美团业务的快速迭代,会有越来越多的新页面、越来越多的业务逻辑、越来越多的代码改动,这些不确定性会使我们测速部分的代码耦合进业务逻辑,并且需要手动维护,进而增加了成本和风险。于是通过借鉴公司先前的一些方案,分析其存在的问题并结合自身特性,我们实现了一套无需业务代码侵入的自动化页面测速插件,本文将对其原理做一些解读和分析。

Kotlin代码检查在美团的探索与实践

Kotlin有着诸多的特性,比如空指针安全、方法扩展、支持函数式编程、丰富的语法糖等。这些特性使得Kotlin的代码比Java简洁优雅许多,提高了代码的可读性和可维护性,节省了开发时间,提高了开发效率。这也是我们团队转向Kotlin的原因,但是在实际的使用过程中,我们发现看似写法简单的Kotlin代码,可能隐藏着不容忽视的额外开销。

本文剖析了Kotlin的隐藏开销,并就如何避免开销进行了探索和实践。

前端遇上Go: 静态资源增量更新的新实践

美团金融的业务在过去的一段时间里发展非常快速。在业务增长的同时,我们也注意到,很多用户的支付环境,其实是在弱网环境中的。大家知道,前端能够服务用户的前提是 JavaScript 和 CSS 等静态资源能够正确加载。如果网络环境恶劣,那么我们的静态资源尺寸越大,用户下载失败的概率就越高。

静态资源的分发是前端开发的一个热门话题。在美团金融服务平台,我们有自己的一套静态资源加载和增量更新方案。本文将总结我们使用Go 语言搭建前端增量更新的一些实践经验。

持续更新中......


----------  END  ----------


您可能也对以下帖子感兴趣

Electron与Tauri:你选择哪款跨平台框架?
Rust编写的跨平台UI框架——Tauri正式发布2.0稳定版,是时候把“毒瘤”Electron换掉了
Harmony:关于鸿蒙系统的内容都总结在这里了
前端跨平台开发框架大盘点
基于Kotlin Multiplatform的鸿蒙跨平台开发实践

文章有问题?点此查看未经处理的缓存